<template>
    <!-- 订单详细弹层 -->
    
      <el-form>
        <el-row>
          <el-col :span="24">
            <el-row align="center">
                <el-col :span="8">
                    <el-form-item label-width="80px" label="订单编号:" prop="orderId">
                  {{ orderInfo.orderId }}
                </el-form-item>
              </el-col>

              <el-col :span="8">
                <el-form-item label-width="80px" label="订单状态:" prop="status">
                  <span v-if="orderInfo.status == 0 && orderInfo.paid == 0">待付款</span>
                  <span v-else-if="orderInfo.status == 0 && orderInfo.paid == 1">待发货</span>
                  <span v-else-if="orderInfo.status > 0 && orderInfo.paid == 1">{{ statusList[orderInfo.status] }}</span>
                </el-form-item>
              </el-col>

              <el-col :span="8">
                <el-form-item label-width="80px" label="订单金额:" prop="orderId">
                  {{ orderInfo.totalPrice }} 元
                </el-form-item>
              </el-col>
            </el-row>
            
            <el-row align="center">
              <el-col :span="8">
                <el-form-item label-width="80px" prop="sort" label="支付金额:">
                  {{ orderInfo.payPrice }} 元
                </el-form-item>
              </el-col>

              <el-col :span="8">
                <el-form-item label-width="80px" prop="sort" label="下单时间:">
                  {{ orderInfo.addTime | parseTimeFormat('YYYY-MM-DD HH:mm:ss') }}
                </el-form-item>
              </el-col>

              <el-col :span="8">
                <el-form-item label-width="80px" label="付款时间:" prop="status">
                  {{ orderInfo.payTime  | parseTimeFormat('YYYY-MM-DD HH:mm:ss') }}
                </el-form-item>
              </el-col>
            </el-row>

            <el-row align="center">
                <el-col :span="8">
                    <el-form-item label-width="80px" label="订单备注:" prop="mark">
                        {{ orderInfo.mark }}
                    </el-form-item>
              </el-col>
            </el-row>
            
            <el-divider content-position="center">收件人</el-divider>

            <el-row align="center">
              <el-col :span="8">
                <el-form-item label-width="80px" label="姓名:" prop="realName">
                  {{ orderInfo.realName }}
                </el-form-item>
              </el-col>

              <el-col :span="8">
                <el-form-item label-width="80px" label="手机号:" prop="userPhone">
                  {{ orderInfo.userPhone }}
                </el-form-item>
              </el-col>

              <el-col :span="8">
                <el-form-item label-width="80px" label="收货地址:" prop="userAddress">
                  {{ orderInfo.userAddress }}
                </el-form-item>
              </el-col>
            </el-row>

            <el-divider content-position="center" v-if="orderInfo.status > 0">发货信息</el-divider>

            <el-row align="center" v-if="orderInfo.status > 0">
                <el-col :span="8">
                    <el-form-item label-width="80px" label="快递名称:" prop="deliveryName">
                        {{ orderInfo.deliveryName }}
                    </el-form-item>
                </el-col>

                <el-col :span="8">
                    <el-form-item label-width="80px" label="快递单号:" prop="deliveryId">
                        {{ orderInfo.deliveryId }}
                    </el-form-item>
                </el-col>
            </el-row>

            <el-divider content-position="center">购买商品</el-divider>

            <el-row align="left">
                <el-col :span="12" v-for="(product, index) in orderInfo.productList" :key="index">
                    <el-row align="left">
                        <el-col :span="4">
                            <el-image style="width: 50px; height: 50px" :src="product.image"></el-image>
                        </el-col>
                        <el-col :span="20" style="font-size:14px;line-height:25px;"> 
                            <div>{{ product.storeName }}</div>
                            <div>{{ spec(product.id) }}</div>
                        </el-col>
                    </el-row>
                </el-col>
            </el-row>
          </el-col>
        </el-row>
      </el-form>
    
</template>

<script>
export default {
    name: 'orderDetail',
    props: {
        orderInfo: {},
        statusList: {},
        payStatusList: {},
    },
    computed: {
        spec(productId){
            return (productId) => {
                if (this.orderInfo.cartInfos.length > 0) {
                    for (let i in this.orderInfo.cartInfos) {
                        let cartInfo = JSON.parse(this.orderInfo.cartInfos[i].cartInfo);
                        if (cartInfo.spec != undefined) {
                            let specInfo = JSON.parse(cartInfo.spec);
                            let specDetail = JSON.parse(specInfo.attrs[0].detail);
                            let selectSpecList = [];

                            for (let i in specDetail) {
                                selectSpecList.push(i + ":" + specDetail[i]);
                            }

                            if (productId == this.orderInfo.cartInfos[i].productId) {
                                return selectSpecList.join(' ');
                            }
                        }
                    }
                }
            }
        },
    },
    created (){
    //     console.log('order info : ',this.orderInfo.cartInfos[0].cartInfo);
    //     console.log('order info : ',JSON.parse(this.orderInfo.cartInfos[0].cartInfo));
        // let cart = JSON.parse(this.orderInfo.cartInfos[0].cartInfo);
        // console.log('spec', JSON.parse(cart.spec));
    },
    data (){
        return {
            
        }
    },
    methods: {

    }
}
</script>

<style lang="scss" scoped>

</style>
